<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('新增成本列表')"/>
    <style>
        .form-group label {
            font-weight: 600;
        }

        .preview-img {
            max-width: 200px;
            max-height: 150px;
            margin-top: 10px;
        }

        td, th {
            vertical-align: middle !important;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-rate-query" >
        <input name="targetAgentId"   th:value="${targetAgentId}" type="hidden" />

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>交易类型</th>
                <th>结算类型</th>
                <th>贷记卡成本(单位：百万分之一)</th>
                <th>贷记提现费(单位：百万分之一)</th>
                <th>借记卡成本(单位：百万分之一)</th>
                <th>借记提现费(单位：百万分之一)</th>
                <th>借记卡封顶(单位：百万分之一)</th>
                <th>不分借贷成本(单位：百万分之一)</th>
            </tr>
            </thead>
            <tbody id="fee-table-body">
            <!-- JS动态生成内容 -->
            </tbody>
        </table>
    </form>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "channel/agent";

    // 后端数据，Spring会把它渲染成JS对象
    const backendData = /*[[${#arrays.isEmpty(feeList) ? null : feeList}]]*/ [];
    const safeBackendData = Array.isArray(backendData) ? backendData : [];
    if (safeBackendData.length === 0) {
        // $.modal.alertError('未获取到成本数据，请先配置后再查看！');
        parent.layer.msg('未获取到成本数据，请先配置后再查看！', {icon: 2, time: 1500}, function () {
            const index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    }

    // 转换后端数据为 Map：key 形如 "10001_T0"
    const backendMap = {};
    safeBackendData.forEach(item => {
        const key = `${item.feeType}_${item.settleType}`;
        backendMap[key] = item;
    });

    const feeTypes = [
        {code: 10001, label: "刷卡"},
        {code: 10002, label: "小额双免"},
        {code: 20001, label: "微信"},
        {code: 30001, label: "支付宝"},
        {code: 50001, label: "快捷"},
        {code: 60001, label: "银联扫码(小额)"},
        {code: 60002, label: "银联扫码(大额)"}
    ];

    const settleTypes = ["T0", "T1"];
    const tbody = document.getElementById("fee-table-body");

    let index = 0;

    feeTypes.forEach(feeType => {
        settleTypes.forEach((settle, settleIndex) => {
            const key = `${feeType.code}_${settle}`;
            // const tpl = templateData[key] || {};
            const tpl = backendMap[key] || {}; // 先用后端数据
            const row = document.createElement("tr");

            // 交易类型单元格只在第一行显示，并且合并两行 (rowspan=2)
            let feeTypeCell = '';
            if (settleIndex === 0) {
                feeTypeCell = `<td rowspan="2">${feeType.label}
                    <input type="hidden" name="feeList[${index}].feeType" value="${feeType.code}">
                    <input type="hidden" name="feeList[${index + 1}].feeType" value="${feeType.code}">
                </td>`;
            }

            row.innerHTML = `
                ${feeTypeCell}
                <td>
                    ${settle}
                    <input type="hidden" name="feeList[${index}].settleType" value="${settle}">
                </td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].feeCredit" value="${tpl.feeCredit ?? ''}"/></td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].feeCreditFixed" value="${tpl.feeCreditFixed ?? ''}"/></td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].feeDebit" value="${tpl.feeDebit ?? ''}"/></td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].feeDebitFixed" value="${tpl.feeDebitFixed ?? ''}"/></td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].feeDebitMax" value="${tpl.feeDebitMax ?? ''}"/></td>
                <td><input class="form-control" type="number" step="100" name="feeList[${index}].fee" value="${tpl.fee ?? ''}"/></td>
            `;

            tbody.appendChild(row);
            index++;
        });
    });
    document.querySelectorAll('#form-rate-query input').forEach(input => {
        input.setAttribute('readonly', true);
        input.setAttribute('disabled', true);
    });

</script>
</body>
</html>
